import { mapGetters } from 'vuex'

/**
 * mixins 主要目的就是为了实现复用
 * 多个组件、页面之间可能存在相同的数据、钩子函数、方法、watch、computed 等等这些特性
 * 如果相同，就可以抽取成 mixins 文件，然后在各个文件中导入，并挂载到 mixins 数组中
 * 即可实现复用
 */

// 导出一个 mixin 对象
export default {  
  onShow() {
    // 在页面刚展示的时候，调用设置徽章的方法
    this.setBadge()
  },
  
  methods: {
    // 设置徽章
    setBadge () {
      // 调用 API 方法，为购物车设置右上角的徽章
      uni.setTabBarBadge({
        index: 2, // 索引
        text: this.total + '' // text 必须为 String 类型
      })
    }
  },
  
  watch: {
    // 监听 total 值
    total () {
      // 调用 methods 中的 setBadge 方法，重新为 tabBar 的数字徽章赋值
      this.setBadge()
    }
  },
  
  computed: {
    ...mapGetters('m_cart', ['total'])
  }
  
}